<template>
  <div class="problemset-page">
    <div class="problemset-container">
      <MainHeader></MainHeader>
      <div class="problemset-display">
        <ul class="problemset-display-box">
          <li>
            <div class="problemset-display-header">
              <div class="problemset-display-header-box">
                <form class="filter-form">
                  <div class="filter-item">
                    <label>Name:</label>
                    <input type="text" placeholder="Enter name">
                  </div>

                  <div class="filter-item">
                    <label>Tag:</label>
                    <select>
                      <option value="">Select a tag</option>
                      <option value="tag1">动态规划</option>
                      <option value="tag2">贪心</option>
                      <option value="tag3">数据结构</option>
                      Add more tags as needed
                    </select>
                  </div>

                  <div class="filter-item">
                    <label>Rank:</label>
                    <input type="number" min="0" placeholder="Enter rank">
                  </div>

                  <div class="filter-buttons">
                    <button type="button" >Filter</button>
                    <button type="button" >Reset</button>
                  </div>
                </form>
              </div>
            </div>
          </li>
          <li>
            <div class="problemset-display-list">
              Problem list will be displayed here
            </div>
          </li>
        </ul>
        
        
      </div>
    </div>
  </div>
</template>

<script>
import MainHeader from '@/components/main-header.vue';
// import { defineComponent, reactive } from 'vue';

// interface FilterState {
//   name: string;
//   tag: string;
//   rank: number | null;
// }

export default {
  components: {
    MainHeader
  }, 

  // setup() {
  //   const filter = reactive<FilterState>({
  //     name: '',
  //     tag: '',
  //     rank: null
  //   });

  //   const applyFilter = () => {
  //     console.log('Applying filter:', filter);
  //     // You can call an API or filter the problem list here

  //     if (filterState.name) {
  //       console.log(`Filtering by name: ${filterState.name}`);
  //     }
  //     if (filterState.tag) {
  //       console.log(`Filtering by tag: ${filterState.tag}`);
  //     }
  //     if (filterState.rank !== null) {
  //       console.log(`Filtering by rank: ${filterState.rank}`);
  //     }
  //   };

  //   const resetFilter = () => {
  //     filter.name = '';
  //     filter.tag = '';
  //     filter.rank = null;
  //     console.log('Filter reset');
  //     // You may also want to reset the problem list display
  //   };

  //   return {
  //     filter,
  //     applyFilter,
  //     resetFilter
  //   };
  // }
};
</script>

<style scoped>
button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.problemset-page {
  .problemset-container {
    margin: 0 auto;
    padding: 0 20px;
    .problemset-display {
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
      max-width: 1200px;
      .problemset-display-box {
        list-style-type: none;
        margin: 0 auto;
        justify-content: center;
        align-items: center;
        .problemset-display-header {
          display: flex;
          width: 900px;
          height: 100px;
          justify-content: center;
          align-items: center;
          background-color: rgb(187, 211, 236);
          border-radius: 10px;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          margin: 10px;
          margin-top: 5px;
          .problemset-display-header-box {
            display: flex;
            position: relative;
            justify-content: center;
            align-items: center;
            width: 100%; /* 或具体宽度 */
            height: 100vh; /* 或具体高度 */
            .filter-form {
              display: flex;
              gap: 16px;
              align-items: center;
              justify-content: center;
              border-radius: 10px;
              .filter-item {
                display: flex;
                gap: 8px;
                height: 25px;
                
              }
              .filter-buttons {
                display: flex;
                gap: 8px;
              }
            }
          }
        }
      }
      
    }
  }
}
</style>
